<!DOCTYPE html>
<html>
<head>
    <title>Customizing templates</title>

    <link href="../../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../../styles/kendo.default.min.css" rel="stylesheet">

    <script src="../../../js/jquery.min.js"></script>
    <script src="../../../js/kendo.web.min.js"></script>
    <script src="../../content/shared/js/console.js"></script>
    <script>
        
    </script>
    
    
</head>
<body>
    
        <a class="offline-button" href="../index.html">Back</a>
    
    
        <div id="example" class="k-content">
            <div class="configuration">
                <span class="infoHead">Information</span>
                <p>
                    Apply special style for the birthdays.
                </p>
            </div>

            <div class="demo-section">
                <input id="datetimepicker" />
            </div>

            <script>
                function isInArray(date, dates) {
                    for(var idx = 0, length = dates.length; idx < length; idx++) {
                        var d = dates[idx];
                        if (date.getFullYear() == d.getFullYear() &&
                            date.getMonth() == d.getMonth() &&
                            date.getDate() == d.getDate()) {
                            return true;
                        }
                    }

                    return false;
                }

                $(document).ready(function() {
                    var today = new Date(),
                        birthdays = [
                           new Date(today.getFullYear(), today.getMonth(), 11, 10, 0, 0),
                           new Date(today.getFullYear(), today.getMonth(), 11, 10, 30, 0),
                           new Date(today.getFullYear(), today.getMonth(), 11, 14, 0, 0),
                           new Date(today.getFullYear(), today.getMonth() + 1, 6, 20, 0, 0),
                           new Date(today.getFullYear(), today.getMonth() + 1, 27, 8, 0, 0),
                           new Date(today.getFullYear(), today.getMonth() + 1, 27, 18, 0, 0),
                           new Date(today.getFullYear(), today.getMonth() - 1, 3, 12, 0, 0),
                           new Date(today.getFullYear(), today.getMonth() - 2, 22, 16, 30, 0)
                        ];

                    $("#datetimepicker").kendoDateTimePicker({
                        value: today,
                        dates: birthdays,
                        month: {
                            // template for dates in month view
                            content: '# if (isInArray(data.date, data.dates)) { #' +
                                         '<div class="birthday"></div>' +
                                     '# } #' +
                                     '#= data.value #'
                        },
                        footer: "Today - #=kendo.toString(data, 'd') #"
                    });

                    $("#datetimepicker").data("kendoDateTimePicker")
                                    .dateView.calendar.element
                                    .width(300);
                });
            </script>

            <style scoped>
                .demo-section {
                    margin-right: 375px;
                    width: 185px;
                }

                .birthday {
                    background: transparent url(../../content/web/calendar/cake.png) no-repeat 0 50%;
                    display: inline-block;
                    width: 16px;
                    height: 16px;
                    vertical-align: middle;
                    margin-right: 3px;
                }
            </style>
        </div>

</body>
</html>
